<template>
  <div class="container mx-auto px-4 py-8 max-w-4xl">
    <!-- 返回按钮 -->
    <button @click="$router.go(-1)" class="mb-6 inline-flex items-center text-blue-500 hover:text-blue-700">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M9.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L7.414 9H15a1 1 0 110 2H7.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
      </svg>
      返回
    </button>

    <!-- 新闻内容 -->
    <article v-if="newsItem" class="bg-white rounded-lg shadow-md p-6 mb-8">
      <div class="mb-4">
        <span class="inline-block px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium mb-4">
          {{ newsItem.category }}
        </span>
        <h1 class="text-3xl font-bold mb-4">{{ newsItem.title }}</h1>
        <div class="flex justify-between items-center text-gray-500 mb-6">
          <span>{{ newsItem.date }}</span>
          <button 
            @click="toggleFavorite"
            class="flex items-center"
            :aria-label="isFavorite ? '取消收藏' : '收藏'"
          >
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path 
                stroke-linecap="round" 
                stroke-linejoin="round" 
                stroke-width="2" 
                :d="isFavorite ? 'M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z' : 'M12 3v1m6.364.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z'"
                :class="isFavorite ? 'text-red-500 fill-red-500' : 'text-gray-400'"
              />
            </svg>
            {{ isFavorite ? '已收藏' : '收藏' }}
          </button>
        </div>
      </div>

      <div class="mb-8">
        <img :src="newsItem.image" :alt="newsItem.title" class="w-full h-96 object-cover rounded-lg mb-6">
        <div class="prose max-w-none">
          <p class="text-lg text-gray-700 mb-4">
            这是新闻的完整内容，包含了所有详细信息和背景资料。在这里，读者可以获取全面的报道和深入的分析。
          </p>
          <p class="text-gray-700 mb-4">
            新闻内容将分为多个段落，每个段落聚焦于不同的方面。我们会提供事实依据、专家观点以及相关数据支持，帮助读者全面了解事件的来龙去脉。
          </p>
          <p class="text-gray-700 mb-4">
            此外，本文还将探讨该事件可能产生的影响和未来发展趋势，为读者提供有价值的参考信息。
          </p>
        </div>
      </div>
    </article>

    <!-- 相关新闻 -->
    <div class="mb-8">
      <h2 class="text-2xl font-bold mb-4">相关新闻</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <NewsCard 
          v-for="item in relatedNews" 
          :key="item.id" 
          :news-item="item" 
          @toggle-favorite="toggleFavorite"
        />
      </div>
    </div>

    <!-- 评论区 -->
    <div class="bg-white rounded-lg shadow-md p-6">
      <h2 class="text-2xl font-bold mb-4">评论 ({{ comments.length }})</h2>
      <div class="mb-6">
        <textarea 
          v-model="newComment" 
          class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
          rows="3" 
          placeholder="写下你的评论..."
        ></textarea>
        <div class="mt-2 flex justify-end">
          <button 
            @click="addComment" 
            class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
            :disabled="!newComment.trim()"
          >
            发表评论
          </button>
        </div>
      </div>

      <div class="space-y-4">
        <div v-for="comment in comments" :key="comment.id" class="border-b border-gray-100 pb-4">
          <div class="flex items-center mb-2">
            <img :src="`https://picsum.photos/seed/${comment.user}/40/40`" alt="用户头像" class="w-8 h-8 rounded-full mr-3">
            <div>
              <div class="font-medium">{{ comment.user }}</div>
              <div class="text-xs text-gray-500">{{ comment.date }}</div>
            </div>
          </div>
          <p class="text-gray-700">{{ comment.content }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useNewsStore } from '../store'
import { useFavoritesStore } from '../store'
import NewsCard from '../components/NewsCard.vue'

const route = useRoute()
const newsStore = useNewsStore()
const favoritesStore = useFavoritesStore()
const newsItem = ref(null)
const relatedNews = ref([])
const comments = ref([])
const newComment = ref('')

// 获取新闻详情
const getNewsDetail = () => {
  // 在实际项目中，这里会通过API根据ID获取新闻详情
  // 这里使用模拟数据
  const id = Number(route.params.id)
  // 从新闻列表中查找当前新闻
  const foundItem = newsStore.news.find(item => item.id === id)
  if (foundItem) {
    newsItem.value = foundItem
    // 生成相关新闻
    generateRelatedNews(foundItem.category)
  } else {
    // 如果找不到，使用默认模拟数据
    newsItem.value = {
      id,
      title: '默认新闻标题',
      summary: '这是一条默认新闻摘要',
      image: 'https://picsum.photos/seed/default/800/400',
      date: new Date().toLocaleDateString(),
      category: '头条'
    }
    generateRelatedNews('头条')
  }

  // 生成模拟评论
  generateMockComments()
}

// 生成相关新闻
const generateRelatedNews = (category) => {
  relatedNews.value = Array(2).fill().map((_, i) => ({
    id: Date.now() + i + 2000,
    title: `${category}相关新闻 ${i+1}`,
    summary: '这是一条相关新闻的摘要内容',
    image: `https://picsum.photos/seed/related${i}/400/240`,
    date: new Date(Date.now() - (i + 1) * 86400000).toLocaleDateString(),
    category
  }))
}

// 生成模拟评论
const generateMockComments = () => {
  comments.value = Array(3).fill().map((_, i) => ({
    id: i,
    user: `用户${i+1}`,
    content: `这是一条模拟评论内容 ${i+1}。用户对这篇新闻发表了自己的看法和意见。`,
    date: new Date(Date.now() - i * 3600000).toLocaleString()
  }))
}

// 添加评论
const addComment = () => {
  if (!newComment.value.trim()) return
  comments.value.unshift({
    id: Date.now(),
    user: '我',
    content: newComment.value,
    date: new Date().toLocaleString()
  })
  newComment.value = ''
}

// 收藏功能
const isFavorite = computed(() => newsItem.value && favoritesStore.isFavorite(newsItem.value.id))
const toggleFavorite = () => {
  if (newsItem.value) {
    favoritesStore.toggleFavorite(newsItem.value)
  }
}

onMounted(() => {
  getNewsDetail()
})
</script>